<template>
  <div class="hazard-analysis">
    <div class="title"></div>
    <div class="main">
      <ClassStatistics />
      <HazardTrend />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import ClassStatistics from './classStatistics/index.vue';
import HazardTrend from './hazardTrend/index.vue';

defineComponent({ name: 'HazardAnalysis' });
</script>

<style scoped lang="scss">
.hazard-analysis {
  @apply w-full mt-[35px] flex flex-col justify-between;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-auto mt-[12px] grid grid-cols-2 gap-[45px];
  }
}
</style>
